<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>计算属性（computed）</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        姓：<input v-model="firstName" type="text" /> <br />
        名：<input v-model="lastName" type="text" /> <br />

        <!-- 插值语法实现 -->
        全名：{{ firstName }} - {{ lastName }} <br />

        <!-- methods 实现 -->
        全名：{{ getFullName() }} <br />

        <!-- computed 实现 -->
        全名：{{ fullName }}
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                // 计算属性完整写法
                fullName: {
                    // 当有人读取 fullName 时，get 就会被调用，get 的返回值就作为 fullName 的值
                    get() {
                        return this.firstName + ' - ' + this.lastName
                    },
                    set(value) {
                        const [firstName, lastName] = value.split('')
                        this.firstName = firstName
                        this.lastName = lastName
                    }
                }
                // 计算属性简写形式
                // fullName() {
                //   return this.firstName + " - " + this.lastName;
                // }
            },
            methods: {
                getFullName() {
                    return this.firstName + ' - ' + this.lastName
                }
            }
        })
    </script>

</body>
</html>